import React from 'react'
import "../../common/common.css"
import domtoimage from 'dom-to-image';

export default function DomToImage() {
    // 点击截图并下载png图片
    const operation = () => {
        var node = document.getElementById("saveAs");
        domtoimage.toBlob(node).then(blob => {
            window.saveAs(blob, 'my-node.png')
            // window.saveAs(blob, 'my-node.jpg')
        })
    };

    // 点击显示截图
    const appendchild = () => {
        var node = document.getElementById("appendchild");
        domtoimage.toPng(node)
            .then(function (dataUrl) {
                var img = new Image();
                img.src = dataUrl;
                document.body.appendChild(img);
            })
            .catch(function (error) {
                console.error('oops, something went wrong!', error);
            });
    }

    // 生成并下载jpg图片
    const jpgCreate = () => {
        domtoimage.toJpeg(document.getElementById('jpgcreate'), { quality: 0.95 })
            .then(function (dataUrl) {
                var link = document.createElement('a');
                link.download = 'my-image-name.jpeg';
                link.href = dataUrl;
                link.click();
            });
    }

    return (
        <div>
            <button className='returnButton' style={{ padding: '0px' }}><a href="/">点击返回主菜单</a></button>

            <h1>DomToImage</h1>
            <div id="saveAs" style={{ backgroundColor: '#704', paddingBottom: "12px" }}>
                <p style={{ color: '#3BB704' }}>Hello!这是被捕获的div</p>
                <span style={{ color: '#C30DFF' }}>这是其他标签</span>
            </div>
            <div id="appendchild" style={{ backgroundColor: '#784504', height: "100px", width: "100%" }}>
                <p style={{ color: '#304' }}>Hello!这是被捕获的div</p>
                <span style={{ color: '#C30' }}>这是其他标签</span>
            </div>
            <div id="jpgcreate" style={{ backgroundColor: '#125404' }}>
                <p style={{ color: '#fdab1c' }}>Hello!这是被捕获的div</p>
                <span style={{ color: '#C38ab0' }}>这是其他标签</span>
            </div>

            <button onClick={operation}>点击截图并下载png图片</button>
            <button onClick={appendchild}>点击显示截图</button>
            <button onClick={jpgCreate}>生成并下载jpg图片</button>

            <div>
                <h1>主要方法和属性</h1>
                <h2>方法：</h2>
                domtoimage.toPng(…);将节点转化为png格式的图片<br />
                domtoimage.toJpeg(…);将节点转化为jpg格式的图片 <br />
                domtoimage.toSvg(…);将节点转化为svg格式的图片， 生成的图片的格式都是base64格式 <br />
                domtoimage.toBlob(…);将节点转化为二进制格式，这个可以直接将图片下载 <br />
                domtoimage.toPixelData(…);获取原始像素值， 以Uint8Array 数组的形式返回，
                每4个数组元素表示一个像素点， 即rgba值。这个方法也是挺实用的，可以用于WebGL中编写着色器颜色。 <br />
                <h2>属性：</h2>
                filter ： 过滤器节点中默写不需要的节点； <br />
                bgcolor ： 图片背景颜色； <br />
                height, width ： 图片宽高； <br />
                style ：传入节点的样式，可以是任何有效的样式； <br />
                quality ： 图片的质量，也就是清晰度；一个介于 0 和 1 之间的数字，表示 JPEG 图像的图像质量（例如 0.92 =&gt; 92%）。默认为 1.0 (100%) <br />
                cacheBust ： 将时间戳加入到图片的url中，相当于添加新的图片: <br />
                imagePlaceholder ： 图片生成失败时，在图片上面的提示，相当于img标签的alt; <br />
                <h2>参考文章链接</h2>
                <a href="https://www.mianshigee.com/project/tsayen-dom-to-image" target="blank">dom-to-image：使用HTML5 canvas从DOM节点生成图</a>
                <h2>使用domtoimage插件生成图片模糊失真问题</h2>
                <a href="https://blog.csdn.net/weixin_45195628/article/details/112891739?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-112891739-blog-120683352.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-112891739-blog-120683352.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=3" target="blank">使用domtoimage插件生成图片模糊失真问题</a>
            </div>
        </div>
    )
}
